<template>
	<view class="page-container">
		<uni-card :is-shadow="false" is-full class="card-container">

			<view class="profile-section">
				<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
				</image>
				<button class="upload-btn" @click="handleUploadAvatar">编辑头像</button>
			</view>
			<view class="container">
				<uni-title style="margin-left: 18px;" type="h2" title="审查员信息"></uni-title>
				<uni-list>

					<uni-list-item :to="`./edit`" showArrow showExtraIcon="true" :extraIcon="{type: 'person-filled'}"
						title="姓名" :rightText="user.nickName" />
					<uni-list-item :to="`./edit`" showArrow showExtraIcon="true" :extraIcon="{type: 'phone-filled'}"
						title="所属单位" :rightText="user.phonenumber" />
					<uni-list-item :to="`./edit`" showArrow showExtraIcon="true" :extraIcon="{type: 'email-filled'}"
						title="职位" :rightText="user.email" />
				</uni-list>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		getUserProfile
	} from "@/api/system/user"
	import {
		getToken
	} from '@/utils/auth'

import avatar from '@/components/yq-avatar/yq-avatar.vue'
	export default {
		data() {
			return {
				user: {
					avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg' // 确保有默认值，防止渲染时未定义
				},
				roleGroup: "",
				postGroup: ""
			}
		},
		onLoad() {
			this.getUser()
		},
		computed: {
			avatar() {
				this.user.avatar='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
				
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {

			getUser() {
				getUserProfile().then(response => {
					this.user = response.data // 注意这里可能需要根据实际返回数据结构调整
					this.roleGroup = response.roleGroup
					this.postGroup = response.postGroup
				})
			},
			handleUploadAvatar() {

				/*
      // 处理上传头像的逻辑
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          console.log(tempFilePaths);
          // 这里可以调用上传接口将tempFilePaths中的文件路径发送给服务器
          // 例如：
          // uploadAvatar(tempFilePaths[0]).then(response => {
          //   this.user.avatar = response.data.url; // 更新用户头像URL
          // });
        }
      });
	  
	  */
				uni.chooseImage({
					count: 1, // 选择1张图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]; // 获取临时路径
						console.log(tempFilePath);
						uni.uploadFile({
							url: 'https://8954wg323mw0.vicp.fun/app/upload/imageFile', // 替换为实际接口地址
							filePath: tempFilePath,
							name: 'file', // 必须与后端@RequestParam("file")的字段名一致[1,4](@ref)
							header: {
								'Authorization': 'Bearer ' + getToken(), // 按需添加认证头[5](@ref)
								
							},
							success: (uploadRes) => {
								const response = JSON.parse(uploadRes.data);
								if(response.code===0){
									this.user.avatar=response.data;
									this.$modal.msgSuccess("头像上传成功"+response.data);
								}
								// 解析后端返回的图片地址（假设返回JSON字符串）
							//	const response = JSON.parse(uploadRes.data);
								//console.log('图片地址:',  tempFilePath); // 例如: { "url": "http://xxx/image.jpg" }
							},
							fail: (err) => {
								console.error('上传失败', err);
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	/* 外层容器 */
	.page-container {
		display: flex;
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
		margin: 0;
		padding: 15px;
	}

	/* uni-card 容器 */
	.card-container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	/* 头像部分 */
	.profile-section {
		text-align: center;
		margin-bottom: 15px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.upload-btn {
		margin-top: 10px;
		background-color: #1aad19;
		color: white;
		border: none;
		width: 140px;
		height: 40px;
		font-size: 17px;
		cursor: pointer;
		border-radius: 15px;
	}

	/* 内层容器 */
	.container {
		flex-grow: 1;
		display: flex;

		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
	}
</style>